<template>
  <v-main>
    <v-app-bar
        color="primary"
        fixed
        app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>妆典</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn to="/home/index" replace plain small>
        <template v-slot:default>
          <v-icon class="mr-1">mdi-apps</v-icon>
          <span class="text-subtitle-1">进入应用</span>
        </template>
      </v-btn>
      <v-btn plain @click="logout" small>
        <template v-slot:default>
          <v-icon class="mr-1">mdi-logout-variant</v-icon>
          <span class="text-subtitle-1">退出登录</span>
        </template>
      </v-btn>
    </v-app-bar>
    <!--    侧边抽屉-->
    <v-navigation-drawer
        app
        v-model="drawer"
        class="grey lighten-4"
    >
      <v-card flat>
        <v-avatar size="85" color="mt-3 ml-3">
          <v-img :src="$store.getters.getAvatar"></v-img>
        </v-avatar>
        <v-card-title v-text="userData.nickname"></v-card-title>
        <v-card-subtitle v-text="getPrivilege"></v-card-subtitle>
      </v-card>
      <v-list>
        <v-list-group
            v-for="item in menu"
            :key="item.mid"
            :prepend-icon="item.icon"
            no-action
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item
              v-for="child in item.subMenu"
              :key="child.mid"
              @click.stop="gotoMenu(child)"
              class="ml-2"
          >
            <v-list-item-content>
              <v-list-item-title v-text="child.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>

    <!--子页面，管理页面-->
    <v-container fluid class="full-height">
      <v-card class="full-height">
        <v-tabs show-arrows v-model="activeTab">
          <v-tab v-for="(item,index) in activeTabs" :key="index" @click.stop="changeTab(index)">
            <template v-slot:default>
              {{ item.title }}
              <v-icon color="red darken-4" class="ml-1" @click.stop="removeTab(index)" size="20" v-if="index">
                mdi-close
              </v-icon>
            </template>
          </v-tab>
        </v-tabs>

        <router-view @toast="toast" @newTab="newTab" @closeTab="closeTab"/>
        <v-snackbar
            v-model="showToastMsg"
            :timeout="toastTimeOut"
        >
          <span :class="warning?'red--text':''">
          {{ toastMsg }}
          </span>
        </v-snackbar>
      </v-card>
    </v-container>

  </v-main>


</template>

<script>
import {printMsg, simpleCopy} from "../../util/util";

export default {
  name: "Index",
  data: () => ({
    showToastMsg: false,
    toastMsg: '',
    toastTimeOut: 3000,
    warning: '',

    userData: {
      nickname: '你好好好',
      privilege: 0,
    },

    drawer: true,
    mini: true,
    activeTabs: [
      {title: '欢迎', route: '/admin/index'},
    ],
    activeTab: 0,
    menu: [
      // {
      //   title: 'zz',
      //   icon: '',
      //   subMenu: [
      //     {title: 'aa', route: ''}
      //   ]
      // }
    ],
  }),
  methods: {
    toast(msg, timeOut = 3000, warning = false) {
      this.showToastMsg = true;
      this.toastTimeOut = timeOut
      this.toastMsg = msg
      this.warning = warning
    },
    // 这两个方法仅供手动使用
    newTab(item){
      printMsg('打开新tab '+item.title,this)
      this.activeTabs.push(item)
      // printMsg(this.activeTabs.length)
      this.changeTab(this.activeTabs.length-1)
    },
    closeTab(item){
      for (let i = 0; i < this.activeTabs.length; i++) {
        if (this.activeTabs[i].title===item.title){
          printMsg('关闭tab '+this.activeTabs[i].title,this)
          this.removeTab(i)
          break;
        }
      }
    },
    removeTab(index) {
      // 当激活页是点击删除同一页
      if (this.activeTab === index){
        this.activeTab = index-1
        this.gotoPath(this.activeTabs[index-1].route)
        this.activeTabs.splice(index, 1);
      }else{
        this.activeTabs.splice(index, 1);
      }
    },
    changeTab(index) {
      if (this.activeTab !== index) {
        this.activeTab = index
        this.gotoPath(this.activeTabs[index].route)
      }
    },
    gotoMenu(subMenu) {
      if (this.activeTabs.indexOf(subMenu) === -1) {
        // 添加到菜单tab
        this.activeTabs.push(subMenu)
      }
      this.activeTab = this.activeTabs.indexOf(subMenu)
      this.gotoPath(subMenu.route)
    },
    gotoPath(path) {
      if (this.$route.path !== path) {
        this.$router.replace(path)
      }
    },
    logout() {
      this.$store.commit('quit')
      this.$router.replace('/login')
    }
  },
  beforeMount() {
    simpleCopy(this.$store.state, this.userData)
    this.gotoPath("/admin/index")

    let data = {
      privilege: this.userData.privilege
    }
    this.$http.post('admin/menu/showMenu', data).then(res => {
      // printMsg(res)
      this.menu = res.data
    }).catch(res => {

    })
  },
  computed: {
    getPrivilege() {
      if (this.userData.privilege === 2) {
        return "管理员"
      } else if (this.userData.privilege === 3) {
        return "Admin管理员"
      }
    }
  }
}
</script>

<style scoped>

</style>
